<template>
  <div style="letter-spacing: 1px" slot="comment">
    <div class="head" @click="toPersoanlCenter(userId)">
      <!-- 评论区域如果当前用户有头像则显示头像,没有则显示默认头像 -->
      <img v-if="picture" :src="`http://` + picture" alt="" />
      <img v-else src="../../assets/头像.jpg" alt="" />
      <!-- 评论框 -->
      <input
        type="text"
        placeholder="请输入评论 . . ."
        ref="input"
        @focus="obtain"
        @blur="lose"
        v-model="firstComments"
        @keyup.enter="sumbit"
      />
      <!-- 发布按钮 -->
      <button @click="sumbit">发表评论</button>
    </div>
    <div class="content">
      <!-- 一级评论 -->
      <div class="first" v-for="(item, index) in comments" :key="index">
        <a
          href="javascript:;"
          class="first-img"
          @click="toPersoanlCenter(item.user_id)"
        >
          <!-- 如果当前用户有头像则显示头像,没有则显示默认头像 -->
          <!-- <img :src="`http://` + item.picture" /> -->
          <img v-if="item.picture" :src="`http://` + item.picture" alt="" />
          <img v-else src="../../assets/头像.jpg" alt="" />
        </a>
        <div class="first-content">
          <!-- 一级评论用户昵称 -->
          <h3 class="first-username" @click="toPersoanlCenter(item.user_id)">
            {{ item.username }}
          </h3>
          <!-- 一级评论发布时间 -->
          <span class="first-time">{{ item.date }}</span>
          <!-- 一级评论评论内容 -->
          <p class="first-comment">
            {{ item.content }}
          </p>
          <!-- 一级评论评论点赞 -->
          <div
            class="first-right"
            @mouseleave="delete_leave(item)"
            @mouseover="delete_after(item)"
          >
            <span
              class="delete"
              v-if="item.delete"
              @click="comment_delete(item, 0)"
              >删除</span
            >
            <span class="comments" @click="comment_input(item)">评论</span>
            <!-- 一级评论点赞数 -->
            <span
              class="praise"
              :class="item.like"
              @click="comment_like(item, 0)"
            >
              <span v-if="item.numbers">{{ item.numbers }}</span>
            </span>
          </div>
          <!-- 回复一级评论 -->
          <div class="reply-comment" v-if="item.display">
            <input
              type="text"
              placeholder="请输入评论 . . ."
              v-model="childComments"
              @keyup.enter="reply_sumbit(item, 0)"
            />
            <!-- 0为回复一级评论 -->
            <button @click="reply_sumbit(item, 0)">发表评论</button>
          </div>
          <!-- 次级评论 -->
          <div class="second">
            <ul>
              <li v-for="(sons, index) in item.sons" :key="index">
                <div class="top">
                  <!-- 次级评论头像,该用户没有头像则显示默认头像 -->
                  <a
                    href="JavaScript:;"
                    class="second-img"
                    @click="toPersoanlCenter(sons.user_id)"
                  >
                    <img v-if="sons.picture" :src="`http://` + sons.picture" />
                    <img v-else src="../../assets/头像.jpg" />
                  </a>
                  <div class="second-content">
                    <!-- 次级评论用户昵称 -->
                    <h3
                      class="second-username"
                      @click="toPersoanlCenter(sons.user_id)"
                    >
                      {{ sons.username }}
                    </h3>
                    <!-- 次级评论评论时间 -->
                    <span class="second-time">{{ sons.date }}</span>
                    <!-- 次级评论内容 xxx回复xxx：评论内容-->
                    <p class="second-comment">
                      <span class="second-reply">
                        <span class="to_reply">{{ sons.username }}</span>
                        回复
                        <span class="to_reply">{{ sons.to_username }}</span
                        >：
                      </span>
                      {{ sons.content }}
                    </p>
                    <!-- 次级评论评论点赞 -->
                    <div
                      class="second-right"
                      @mouseleave="delete_leave(sons)"
                      @mouseover="delete_after(sons)"
                    >
                      <span
                        class="delete"
                        v-if="sons.delete"
                        @click="comment_delete(sons, 1)"
                        >删除</span
                      >
                      <span class="comments" @click="comment_input(sons)"
                        >评论</span
                      >
                      <!-- 次级评论点赞数 -->
                      <span
                        class="praise"
                        :class="sons.like"
                        @click="comment_like(sons, 1)"
                      >
                        <span v-if="sons.numbers">{{
                          sons.numbers
                        }}</span></span
                      >
                    </div>
                  </div>
                </div>
                <!-- 回复次级评论 -->
                <div class="reply-comment reply_li" v-if="sons.display">
                  <input
                    type="text"
                    placeholder="请输入评论 . . ."
                    v-model="childComments"
                    @keyup.enter="reply_sumbit(sons, 1)"
                  />
                  <!-- 1为回复次级评论 -->
                  <button @click="reply_sumbit(sons, 1)">发表评论</button>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 暂无评论的空状态 -->
      <el-empty description="暂无评论" v-if="show"></el-empty>
    </div>
    <!-- 页码 -->
    <div style="text-align: center; margin-top: 15px" v-if="showPage">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalNumber * 10"
        @current-change="currentPage"
        :current-page="page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
//引入防抖
import { debounce } from "../../api/debounce/debounce";
export default {
  name: "Comments",
  data() {
    return {
      comments: [], //评论内容
      firstComments: "", //一级评论的关键词
      childComments: "", //孩子评论的关键词
      page: 1, //页码（默认为1）
      totalNumber: 10, //总页数，默认1页
      show: true, //空状态显示与隐藏
      showPage: false, //当空状态显示时隐藏页码
      picture: "", //评论框头像
      commentCount: "0", //评论数量
    };
  },
  props: ["article", "uid", "userId"],
  methods: {
    //点击跳转其他人的主页
    toPersoanlCenter(id) {
      this.$router.push({
        name: "PersonalCenter",
        query: {
          id: id,
        },
      });
    },
    // 评论框获取焦点
    obtain() {
      this.$refs.input.style.border = "2px solid skyblue";
    },
    // 评论框失去焦点
    lose() {
      this.$refs.input.style.border = "2px solid #f8f8f8";
    },
    // 切换后页码
    currentPage(val) {
      this.page = val;
      this.view_comments(); //显示评论
    },
    // 发表一级评论
    sumbit() {
      if (this.firstComments.trim()) {
        this.$http({
          method: "post",
          url: "comments/writeComment",
          headers: { "Content-Type": "application/json" },
          data: JSON.stringify({
            article_id: this.article, //文章的id
            user_id: this.$store.getters.getLoginxMessage.uid, //用户id
            content: this.firstComments.trim(), //评论内容
          }),
        }).then(({ data }) => {
          if (data.flag) {
            this.$message.success(data.errorMsg);
            this.firstComments = ""; //评论框清空
            this.view_comments(); //调用查看评论
          } else {
            this.$message.error(data.errorMsg);
          }
        });
      } else {
        this.$message.warning("不能为空");
      }
    },
    // 回复评论
    reply_sumbit(value, i) {
      if (this.childComments.trim()) {
        // 当i为1时回复次级评论 0时回复一级评论
        if (i) {
          this.$http({
            method: "post",
            url: "comments/writeCommentReply",
            headers: { "Content-Type": "application/json" },
            data: JSON.stringify({
              father_id: value.id, //回复的次级评论id
              article_id: this.article, //文章id
              user_id: this.$store.getters.getLoginxMessage.uid, //用户id
              to_userid: value.user_id, //回复用户的id
              content: this.childComments.trim(), //评论内容
            }),
          }).then(({ data }) => {
            if (data.flag) {
              this.$message.success(data.errorMsg);
              this.childComments = ""; //一级评论框清空
              this.view_comments(); //调用查看评论
            } else {
              this.$message.error(data.errorMsg);
            }
          });
        } else {
          this.$http({
            method: "post",
            url: "comments/writeCommentReply",
            headers: { "Content-Type": "application/json" },
            data: JSON.stringify({
              reply_id: value.comment_id, //回复的一级评论id
              article_id: this.article, //文章id
              user_id: this.$store.getters.getLoginxMessage.uid, //用户id
              to_userid: value.user_id, //回复用户的id
              content: this.childComments.trim(), //评论内容
            }),
          }).then(({ data }) => {
            if (data.flag) {
              this.$message.success(data.errorMsg);
              this.childComments = ""; //次级评论框清空
              this.view_comments(); //调用查看评论
            } else {
              this.$message.error(data.errorMsg);
            }
          });
        }
      } else {
        this.$message.warning("不能为空");
      }
    },
    // 点赞评论

    comment_like: debounce(function (value, i) {
      // 判断当前评论是否已点赞
      if (value.flag) {
        // 1为次级取消点赞，0为一级取消点赞
        if (i) {
          this.$http({
            method: "post",
            url: `comments/cancelLikes?numbers=${value.numbers}`,
            headers: { "Content-Type": "application/json" },
            data: JSON.stringify({
              id: value.id, //次级评论id
              user_id: this.$store.getters.getLoginxMessage.uid, //登录用户id
            }),
          }).then(({ data }) => {
            if (data.flag) {
              this.view_comments(); //调用查看评论
            } else {
              this.$message.error(data.errorMsg);
            }
          });
        } else {
          this.$http({
            method: "post",
            url: `comments/cancelLikes?numbers=${value.numbers}`,
            headers: { "Content-Type": "application/json" },
            data: JSON.stringify({
              comment_id: value.comment_id, //一级评论id
              user_id: this.$store.getters.getLoginxMessage.uid, //登录用户id
            }),
          }).then(({ data }) => {
            if (data.flag) {
              this.view_comments(); //调用查看评论
            } else {
              this.$message.error(data.errorMsg);
            }
          });
        }
      } else {
        // 1为次级点赞，0为一级点赞
        if (i) {
          this.$http({
            method: "post",
            url: `comments/giveLikes?numbers=${value.numbers}`,
            headers: { "Content-Type": "application/json" },
            data: JSON.stringify({
              id: value.id, //次级评论id
              user_id: this.$store.getters.getLoginxMessage.uid, //登录用户id
            }),
          }).then(({ data }) => {
            if (data.flag) {
              this.view_comments(); //调用查看评论
            } else {
              this.$message.error(data.errorMsg);
            }
          });
        } else {
          this.$http({
            method: "post",
            url: `comments/giveLikes?numbers=${value.numbers}`,
            headers: { "Content-Type": "application/json" },
            data: JSON.stringify({
              comment_id: value.comment_id, //一级评论id
              user_id: this.$store.getters.getLoginxMessage.uid, //登录用户id
            }),
          }).then(({ data }) => {
            if (data.flag) {
              this.view_comments(); //调用查看评论
            } else {
              this.$message.error(data.errorMsg);
            }
          });
        }
      }
    }),

    // 经过评论内容显示删除按钮
    delete_after(value) {
      value.delete = true;
    },
    // 离开评论内容隐藏删除按钮
    delete_leave(value) {
      value.delete = false;
    },
    // 删除一级评论
    comment_delete(value, i) {
      // 当i为1时删除次级评论，为0时删除一级评论
      if (i) {
        this.$http({
          method: "post",
          url: "comments/deleteComment",
          params: {
            id: value.id, //回复评论id
          },
        }).then(({ data }) => {
          if (data.flag) {
            this.$message.success(data.errorMsg);
            this.view_comments(); //调用查看评论
          } else {
            this.$message.error(data.errorMsg);
          }
        });
      } else {
        this.$http({
          method: "post",
          url: "comments/deleteComment",
          params: {
            comment_id: value.comment_id, //一级评论id
          },
        }).then(({ data }) => {
          if (data.flag) {
            this.$message.success(data.errorMsg);
            this.view_comments(); //调用查看评论
          } else {
            this.$message.error(data.errorMsg);
          }
        });
      }
    },
    // 查看评论方法
    view_comments() {
      this.$http({
        method: "post",
        url: "comments/lookComment",
        params: {
          article_id: this.article, //文章的id
          pageNum: this.page, //当前页码
          pageSize: 3, //一页评论条数
          login_userid: this.$store.getters.getLoginxMessage.uid, //当前登录的用户id
        },
      }).then(({ data }) => {
        console.log("评论", data);
        // 当list不为空时(当评论内容不为空)
        this.comments = []; //清空评论列表
        if (data.data.list.length) {
          this.show = false; //当有评论时，隐藏空状态
          this.showPage = true; //当有评论时，显示页码
          this.totalNumber = data.data.pages; //总页数
          this.comments = data.data.list; //评论列表

          // 利用forwach递归去除次级评论数据
          this.comments.forEach((element) => {
            var comment_blog = []; //定义空数组装取出的次级评论
            var son = element.sons; //将当前次级评论列表赋值给变量son
            function child(sonchild) {
              // 嵌套foreach
              sonchild.forEach((element) => {
                comment_blog.push(element); //将次级评论追加到该数组
                if (element.son.length) {
                  // 当次级评论部位空时一直进行递归
                  // 递归追加次级评论
                  child(element.son);
                }
              });
            }
            child(son); //调用函数
            // 将取出的评论信息覆盖到当前评论列表的次级评论处
            element.sons = comment_blog;
          });

          // 双重for循环给一级评论和次级评论添加对象属性
          for (let i = 0; i < this.comments.length; i++) {
            //给每条评论添加一个属性用于控制评论框的显示与隐藏
            this.$set(this.comments[i], "display", false);

            //给每条评论添加一个属性用于删除按钮的显示与隐藏
            // 当 当前登录用户id和当前博客的用户id相同则可以删除所有评论
            if (this.uid === this.$store.getters.getLoginxMessage.uid) {
              this.$set(this.comments[i], "delete", false);
            } else if (
              this.comments[i].user_id ===
              this.$store.getters.getLoginxMessage.uid
            ) {
              // 当 当前评论的用户id和当前登录的用户id相同时则可删除该条评论
              this.$set(this.comments[i], "delete", false);
            }

            //给每条评论添加一个属性用于点赞的颜色变化，true表示当前用户已点赞该条评论
            if (this.comments[i].flag) {
              this.$set(this.comments[i], "like", "comment-like");
            } else {
              this.$set(this.comments[i], "like", "");
            }

            for (let j = 0; j < this.comments[i].sons.length; j++) {
              //给每条评论添加一个属性用于控制评论框的显示与隐藏
              this.$set(this.comments[i].sons[j], "display", false);

              //给每条评论添加一个属性用于删除按钮的显示与隐藏
              // 当 当前登录用户id和当前博客的用户id相同则可以删除所有评论
              if (this.uid === this.$store.getters.getLoginxMessage.uid) {
                this.$set(this.comments[i].sons[j], "delete", false);
              } else if (
                this.comments[i].sons[j].user_id ===
                this.$store.getters.getLoginxMessage.uid
              ) {
                // 当 当前评论的用户id和当前登录的用户id相同时则可删除该条评论
                this.$set(this.comments[i].sons[j], "delete", false);
              }
              //给每条评论添加一个属性用于点赞的颜色变化，true表示当前用户已点赞该条评论
              if (this.comments[i].sons[j].flag) {
                this.$set(this.comments[i].sons[j], "like", "comment-like");
              } else {
                this.$set(this.comments[i].sons[j], "like", "");
              }
            }
          }
        } else {
          // 若删除第一页以后的评论则重新调用查看评论方法查看刚刚删除评论页的上一页评论（最后一页的评论）
          if (this.page > 1) {
            this.page--;
            this.view_comments(); //更新评论列表
          } else {
            this.show = true; //空状态显示与隐藏
            this.showPage = false; //当空状态显示时隐藏页码
          }
        }
        //获取评论条数
        this.getCommentNumber();
      });
    },
    //获取评论数量
    getCommentNumber() {
      this.$http({
        method: "post",
        url: "article/showCommentCount",
        params: {
          article_id: this.$route.query.itemid, //博客id,路由传过来的query值
        },
      }).then(({ data }) => {
        if (data.flag) {
          this.commentCount = data.data;
        } else {
          console.log("无法获取评论数据");
        }
      });
    },
    // 点击每条评论后的评论图标，出现评论框(排他思想)
    comment_input(value) {
      //给每条评论的评论框隐藏
      for (let i = 0; i < this.comments.length; i++) {
        this.comments[i].display = false;
        for (let j = 0; j < this.comments[i].sons.length; j++) {
          this.comments[i].sons[j].display = false;
        }
      }
      // 显示先前选中评论的评论框
      value.display = true;
    },
  },
  watch: {
    commentCount() {
      //提交评论数据
      this.$bus.$emit("getCommentNumber", this.commentCount);
    },
  },
  mounted() {
    this.view_comments(); // 显示评论
    // 评论框区域如果当前用户有头像则显示头像,没有则显示默认头像
    if (this.$store.getters.getLoginxMessage.picture !== null) {
      this.picture = this.$store.getters.getLoginxMessage.picture;
    }
  },
};
</script>

<style scoped>
h3 {
  cursor: pointer;
}
h3:hover {
  color: orangered;
}
/* 评论框 */
.head {
  background-color: rgb(248, 248, 248);
  position: relative;
  height: 75px;
  border-radius: 5px;
}
.head img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 13px;
}
/* 评论框 */
.head input {
  position: absolute;
  top: 13px;
  left: 80px;
  height: 45px;
  border-radius: 5px;
  outline: none;
  width: 65%;
  font-size: 20px;
  padding: 0 20px;
  border: 2px solid #f8f8f8;
}
/* 发布评论按钮 */
.head button {
  position: absolute;
  top: 13px;
  right: 20px;
  width: 120px;
  height: 48px;
  border: 0;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  background-color: rgb(118, 211, 248);
  cursor: pointer;
  letter-spacing: 2px;
}
/* 鼠标经过字体加粗 */
.head button:hover {
  font-weight: 600;
}

/* 评论内容区域 */
.content .first {
  display: flex;
  position: relative;
  padding: 10px 10px 0px 0;
}
.first .first-img {
  flex: 1;
  text-align: center;
}
.first img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.first-username,
.second-username {
  color: #504f4f;
}
.first-content {
  flex: 9;
}
.first-time,
.second-time {
  color: #767575;
}
.first-comment,
.second-comment {
  margin-top: 5px;
}
/* 右边点赞和评论 */
.first-right,
.second-right {
  position: absolute;
  right: 1%;
  top: 10px;
}
.first-right span,
.second-right span {
  margin-right: 20px;
  cursor: pointer;
}
/* 删除评论 */
.delete:hover {
  color: red;
}
/* 评论字体图标 */
.comments::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e8b9";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 4px;
  font-size: 16px;
}
/* 点赞字体图标 */
.praise::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\ec7f";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 4px;
  font-size: 19px;
}
.second {
  background-color: #f3f3f3;
  margin-top: 10px;
}
.second li {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid rgb(237, 237, 237);
}
.second .top {
  display: flex;
  position: relative;
}
.second-img {
  flex: 1;
  text-align: center;
}
.to_reply {
  color: rgb(106, 106, 106);
}
.second-content {
  flex: 9;
}
.second .reply_li {
  margin-left: 70px;
}
/* 评论框 */
.reply-comment {
  margin: 10px 0 0 0;
}
.reply-comment input {
  height: 40px;
  border-radius: 5px;
  outline: none;
  width: 70%;
  font-size: 18px;
  padding: 0 20px;
  /* border: 2px solid #f8f8f8; */
  border: 2px solid skyblue;
}
/* 发布评论按钮 */
.reply-comment button {
  width: 15%;
  height: 43px;
  border: 0;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: rgb(118, 211, 248);
  cursor: pointer;
  letter-spacing: 2px;
  margin-left: 20px;
}
/* 鼠标经过字体加粗 */
.reply-comment button:hover {
  font-weight: 600;
}
/* 评论点赞颜色 */
.comment-like {
  color: red;
}
</style>